<template>
  <div class="containerWrap">
    <el-row class="commonHeader">
      <div>家庭网关业务质量综合分析</div>
      <Navigation style="top:1vh"/>
    </el-row>
    <el-row :gutter="20" style="display: flex;padding: 0 14px;">
      <el-col :span="7">
        <el-row>
          <Table :dataList="dataList"/>
        </el-row>
      </el-col>
      <el-col :span="11">
        <Map
          :gateway_quantity="gateway_quantity"
          :dial_test_time="dial_test_time"
          :manage_quantity="manage_quantity"
          :data_month="data_month"
        />
        <LinePart style="margin-top: 2vh"/>
      </el-col>
      <el-col :span="6">
        <TopBar/>
        <BottomBar style="margin-top: 2vh"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Table from './components/Table'
  import Map from './components/Map'
  import TopBar from './components/TopBar'
  import BottomBar from './components/BottomBar'
  import LinePart from './components/Line'
  import Navigation from '@c/Navigation'
  import MapData from '@/config'
  import eChartsLocationData from '@/config/eChartsLocationData'

  export default {
    name: 'Comprehensive',
    components: {
      Table,
      Map,
      TopBar,
      BottomBar,
      LinePart,
      Navigation
    },
    data() {
      return {
        query: {
          user_level: null,
          user_code: ''
        },
        originalData: {
          data: [],
          range: [],
          isGroupUsers: false
        },
        range: [],
        dataList: [],
        provinceList: MapData.originProvinceList,
        localData: eChartsLocationData.eChartsLocationData,
        gateway_quantity: 0,
        dial_test_time: 0,
        manage_quantity: 0,
        data_month: 0
      }
    },
    created() {
      this.$bus.$off('locationSelect')
      this.$bus.$on('locationSelect', this.repeatInFive)
    },
    mounted() {
      this.init()
    },
    // 离开页面结束循环
    beforeRouteLeave(to, from, next) {
      if (this.timer) {
        clearInterval(this.timer)
      }
      next()
    },
    methods: {
      handleCommand(command) {
        if (command === 'gateWay'){
          this.$router.push('home')
        } else if (command === 'probe') {
          this.$router.push('probe')
        }
      },
      init(){
        this.getQuery(window.location.search)
      },
      // Url中的参数转为Object
      getQuery(searchString) {
        let item = {}
        const args = searchString.length > 0 ? searchString.replace('?','').split('&') : '[]'
        for (let i of args ){
          item[i.split('=')[0]] = i.split('=')[1]
        }
        this.query = item
        this.$store.commit('setIsGroupUsers', this.query.user_level === '0')
        this.repeatInFive(this.query.user_code)
      },
      getQuality(code) {
        window._api.apiQualityAnalyseTwo({ user_code: code }).then(res => {
          if (res.state === 0) {
            this.gateway_quantity = res.data ? res.data.gateway_quantity : 0
            this.dial_test_time = res.data ? res.data.dial_test_time : 0
            this.manage_quantity = res.data ? res.data.manage_quantity : 0
            this.data_month = res.data ? res.data.data_month : 0
          } else {
            this.$message.warning('数据异常')
          }
        })
        window._api.apiQualityAnalyse({ user_code: code }).then(res => {
          if (res.state === 0) {
            // 保存code和name对应关系
            let codeAndName = []
            codeAndName = res.data.map(item => ({
              name: item.region_name,
              code: item.region_code
            }))
            this.$store.commit('setCurrentMapOne', codeAndName)

            this.getDataList(res.data)

            this.rangeMin = res.range[0]
            this.rangeMax = res.range[1]
            let arr = []
            let tmpArr = []
            this.chartDataName = this.provinceList.find(item => item.code == code).name
            arr = res.data.map(item => ({
              name: this.localData.find(i => i.code == item.region_code) ? this.localData.find(i => i.code == item.region_code).name : '',
              value: item.synthesize_score
            }))
            this.chartDataDataList = arr
            tmpArr = res.data.filter(item => item.percent !== '').filter(item => item.percent !== null)
            this.$store.commit('setValidProvinceList', tmpArr)
            this.$bus.$emit('mapInit', this.chartDataDataList, this.chartDataName, this.rangeMin, this.rangeMax, this.data_month)
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      // 将mos原始数据分两页
      getDataList(arr) {
        if (arr.length > 18) {
          let arr1 = []
          let arr2 = JSON.parse(JSON.stringify(arr))
          for (let i=0;i<18;i++) {
            const tmpArr = arr2.splice(0, 1)
            arr1.push(...tmpArr)
          }
          this.dataList = [arr1, arr2]
        } else {
          this.dataList = [arr]
        }
      },
      locationSelect(code) {
        this.$bus.$emit('provinceChanged', code)
        this.$bus.$emit('provinceChangedOn', code)
        this.$bus.$emit('provinceChangedLine', code)
        this.$store.commit('setLocation', this.provinceList.find(item => item.code == code).name)
        this.getQuality(code)
      },
      repeatInFive(code) {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.locationSelect(code)
        this.timer = setInterval(() => {
          this.locationSelect(code)
        }, 1000 * 60 * 2)
      }
    }
  }
</script>
<style scope>
  .commonHeader {
    position: relative;
    display: flex;
    height: 6vh;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 2vh;
  }
  @media only screen and (min-width: 1921px) {
    .commonHeader {
      font-size: 32px;
    }
  }
  @media only screen and (max-width: 1920px) {
    .commonHeader {
      font-size: 32px;
    }
  }
  @media only screen and (max-width: 1600px) {
    .commonHeader {
      font-size: 28px;
    }
  }
  .containerWrap{
    position: relative;
    height: 100vh;
    background: url("../../assets/images/bg.jpg") scroll center no-repeat;
    background-size: 100% 100%;
  }
</style>

